<template>
<div>
    <div style="margin-bottom: 10px">
      <el-button size="mini" :disabled="isbansubmit" type="primary" plain @click="visible=true">提交出库</el-button>
      <el-button
        size="mini"
        :disabled="isbangenter"
        type="primary"
        plain
        @click="generate_app()"
      >生成预约归还单</el-button>
    </div>
    <div class="top-check">
      <el-form :inline="true" :model="checkForm" size="mini">
        <el-form-item label="出库单码">
          <el-input v-model="checkForm.ref"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="checkForm.statu">
            <el-option label="全部" value></el-option>
            <el-option label="待出库" value="待出库"></el-option>
            <el-option label="已出库" value="已出库"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出库日期">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="checkForm.date"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="机构组织名">
          <el-input v-model="checkForm.orangename"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="CheckSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clear_find">清空查询条件</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="topbox">
      <el-table
        border
        :data="list"
        :stripe="true"
        @row-click="selectRow"
        :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
        :row-style="{height:'5px'}"
        :cell-style="{padding:'5px 0'}"
        tooltip-effect="light"
        highlight-current-row
        style="width: 100%;"
        height="400"
      >
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="statu" label="状态" width="95"></el-table-column>
        <el-table-column prop="ref" label="出库单号" width="150"></el-table-column>
        <el-table-column prop="date" label="出库日期" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="orangename" label="机构组织" width="125"></el-table-column>
        <el-table-column show-overflow-tooltip prop="borrower" label="借用人" width="300"></el-table-column>
        <el-table-column prop="storename" label="仓库" width="95"></el-table-column>
        <el-table-column prop="bizname" label="业务员" width="95"></el-table-column>
        <el-table-column show-overflow-tooltip prop="memo" label="备注" width="125"></el-table-column>
      </el-table>
    </div>
    <div class="diver"></div>
      <el-table
        border
        :data="detaillist"
        size="mini"
        :row-style="{height:'5px'}"
        :cell-style="{padding:'5px 0'}"
      >
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="商品编码" width="250"></el-table-column>
        <el-table-column label="商品名称" prop="name" width="200"></el-table-column>
        <el-table-column show-overflow-tooltip prop="spec" label="规格型号" width="250"></el-table-column>
        <el-table-column prop="count" show-overflow-tooltip label="借用数量" width="95"></el-table-column>
        <el-table-column show-overflow-tooltip label="单位" prop="unitname" width="125"></el-table-column>
        <el-table-column prop="memo" show-overflow-tooltip label="备注" width="410"></el-table-column>
      </el-table>

    <div>
      <el-dialog
        title="提交出库"
        :visible.sync="visible"
        :modal-append-to-body="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="500px"
      >
        <p>请确认是否提交出库?</p>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="Submit()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <ReturnApp v-if="visible_app" @dialog-close="visible_app = false" :form="selectedRow"></ReturnApp>
</div>
</template>

<script>
import ReturnApp from "./dialog/return_app";
export default {
  components: { ReturnApp },
  data() {
    return {
      visible_app: false,
      list: [],
      detaillist: [],
      isbansubmit: true,
      isbangenter: true,
      visible: false,
      selectedRow: {},
      getlist: [],
      isCanlend: false,
      checkForm:{}
    };
  },
  created() {
    this.Refresh_List();
  },
  methods: {
     clear_find(){
      this.checkForm={}
    },
     CheckSubmit() {
       this.$http.post("storeborrow/search",this.checkForm).then(response =>{
       this.list = response.data
      })
    },
    Refresh_List() {
      this.$http.get("storeborrow/list").then(response => {
        this.list = response.data;
      });
    },
    Refresh_Detail(id) {
      this.$http
        .post("BorrowDetailDetail/somelist", { borrowref: id })
        .then(response => {
          this.detaillist = response.data;
        });
    },
    selectRow(Row) {
      window.console.log("Row", Row);
      window.console.log("list", JSON.stringify(this.detaillist));

      this.Refresh_Detail(Row.borrowref);
      this.selectedRow = JSON.parse(JSON.stringify(Row));
      if (Row.statu == "已出库") {
        this.isbansubmit = true;
        this.isbangenter = false;
      } else if (Row.statu == "待出库") {
        this.isbansubmit = false;
        this.isbangenter = true;
      }
    },
    async Submit() {
      let count = 0;
      let vm = this;
      this.detaillist.forEach(Row => {
        this.$http
          .post("good/someGoodList", { code: Row.code })
          .then(response => {
            Row.zijin = response.data[0].saleprice * Row.count;
            Row.statu = "借出";
            Row.goodname = Row.name;
            Row.storeid = this.selectedRow.storeid;
            Row.goodcode = Row.code;
            count++;
            if (count == vm.detaillist.length) {
              this.$http
                .post("assetDetail/check", vm.detaillist)
                .then(response => {
                  if (response.data == false) {
                    this.$message.error("仓库库存量不够用!");
                    this.isCanlend = false;
                    return false;
                  } else if (response.data == true) {
                    this.isCanlend = true;
                    if (this.isCanlend == false) {
                      return;
                    }
                    this.detaillist.forEach(Row => {
                      this.$http.post("assetDetail/borrow", Row);
                    });
                    let sub = JSON.parse(JSON.stringify(vm.selectedRow));
                    sub.statu = "已出库";
                    this.$http
                      .post("/storeborrow/update", sub)
                      .then(response => {
                        if (response.data == "success") {
                          this.$http
                            .post("borrow/update", {
                              id: this.selectedRow.borrowref,
                              statu: "已借用"
                            })
                            .then(response => {
                              if (response.data == "success") {
                                this.$message({
                                  message: "提交完成",
                                  type: "success"
                                });
                                this.visible = false;
                                this.Refresh_List();
                              }
                            });
                        }
                      });
                  }
                });
            }
          });
      });
    },
    generate_app() {
      this.visible_app = true;
    }
  }
};
</script>
